<template>
  <a-drawer
    :title="'文章标签管理'"
    v-model:visible="visible"
    closable="true"
    placement="right"
    width="500px"
  >
    <div>
      <a-form layout="inline" :model="query">
        <a-form-item style="width: 150px">
          <a-input v-model:value="ArtTabRef.at_name">
            <template #prefix>标签名称:</template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button @click="generateTab()">添加</a-button>
        </a-form-item>
      </a-form> 
      
    </div>
    <a-table
      :columns="columns"
      :dataSource="ArtTabList"
      :row-selection="rowSelection"
      :row-key="(record) => record.at_tab"
    >
      <template #action="{ record }">
        <a-popconfirm
          title="确定删除标签" + record.at_name
          @confirm="deleteTab(record.at_tab)"
        >
          <a-button type="primary" danger>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    
  </a-drawer>
</template>
<script>
import { ref } from "vue";
import { get, post, tip } from "@/common";
// import Title from 'ant-design-vue/lib/typography/Title';
export default {
  setup() {
    const visible = ref(false);
    const columns = [
      {
        dataIndex: "at_tab",
        title: "编号"
      },
      {
        dataIndex: "at_name",
        title: "名称"
      },
      {
        title: "操作",
        key: "action",
        slots: {
          customRender: "action",
        },
      }
    ];
    const ArtTabList = ref();
    const ArtTabRef = ref({
      at_name: ""
    });

    const open = () => {
      get("/buser/articlemanage/queryAllTabs").then((res) => {
        ArtTabList.value = res.data;
      });
      visible.value = true;
    };

    const deleteTab = (at_tab) => {
      post("/buser/articlemanage/deleteTab?at_id="+at_tab).then((res) => {
        tip.success("标签删除成功!");
      });
      open();
      this.$forceUpdate ();
    };

    const generateTab = () => {
      post("/buser/articlemanage/generateTab?at_name="+ ArtTabRef.value.at_name).then((res) => {
        tip.success("标签添加成功!");
      });
      open();
      this.$forceUpdate ();
    };


    return {
      visible,
      open,
      columns,
      ArtTabList,
      ArtTabRef,
      deleteTab,
      generateTab
    };
  },
};
</script>